import { Reactive, reactive } from "vue";
import { FormInstance, TableColumnCtx } from "element-plus";

type SortOrder = "ascending" | "descending" | null;
type ColumnType = "default" | "selection" | "index" | "expand";
type Alignment = "left" | "center" | "right";
type FilterPlacement =
  | "top"
  | "top-start"
  | "top-end"
  | "bottom"
  | "bottom-start"
  | "bottom-end"
  | "left"
  | "left-start"
  | "left-end"
  | "right"
  | "right-start"
  | "right-end";

export interface ITableColumn<T = any> extends Partial<TableColumnCtx<T>> {
  label?: string; // 必填，显示的标题
  prop?: string; // 必填，对应列内容的字段名
  slots?: string; // 插槽名
  type?: ColumnType; // 列类型，默认 default
  index?: number | ((index: number) => number); // 自定义索引
  columnKey?: string; // 列的唯一标识
  width?: string | number; // 列宽
  minWidth?: string | number; // 最小列宽
  fixed?: boolean | "left" | "right"; // 是否固定列
  sortable?: boolean | "custom"; // 是否可排序
  sortMethod?: (a: any, b: any) => number; // 自定义排序方法
  sortBy?: string | string[] | ((row: any) => any); // 指定排序字段
  sortOrders?: SortOrder[]; // 数据排序规则
  resizable?: boolean; // 是否可调整列宽
  formatter?: (row: any, column: any, cellValue: any, index: number) => string; // 自定义内容渲染
  showOverflowTooltip?: boolean; // 是否显示溢出提示
  align?: Alignment; // 单元格对齐方式
  headerAlign?: Alignment; // 表头对齐方式
  className?: string; // 单元格自定义类名
  labelClassName?: string; // 表头自定义类名
  selectable?: (row: any, index: number) => boolean; // 多选列可选行判断
  reserveSelection?: boolean; // 是否保留多选选中状态
  filters?: { text: string; value: any }[]; // 过滤选项
  filterMethod?: (value: any, row: any, column: any) => boolean; // 自定义过滤方法
  filterPlacement?: FilterPlacement; // 过滤弹出框位置
  filterMultiple?: boolean; // 数据过滤是否多选
  filteredValue?: any[]; // 当前列选中过滤值
}

interface ITableConfigProps {
  columns: ITableColumn[];
  isControls?: boolean;
  isCreateTime?: boolean;
  controlsWidth?: number;

  [prototype: string]: any;
}

/**
 * @description 表格配置
 * @param {array} columns 表格列配置
 * @param {boolean} isControls 是否显示操作列
 * @param isCreateTime
 * @param {number} controlsWidth 操作列宽度
 * @returns gridOptions
 */
export const useTableConfig = ({ columns, isControls = true, isCreateTime = true, controlsWidth = 250 }: ITableConfigProps) => {
  isCreateTime && columns.push({ prop: "createTime", label: "创建时间", width: 180 });

  if (isControls && !columns.some(item => item.prop === "controls")) {
    columns.push({
      prop: "controls",
      label: "操作",
      slots: "controls",
      fixed: "right",
      width: controlsWidth,
      headerAlign: "center"
    });
  }
  const gridOptions = reactive({
    border: false,
    showHeader: true,
    showOverflow: true,
    height: "100%",
    columnConfig: {
      resizable: true
    },
    "default-expand-all": true,
    rowConfig: {
      keyField: "id"
    },
    columns: columns
  });

  return {
    gridOptions
  };
};

interface ISearchProps<T> {
  searchEvent: (searchForm: Reactive<T>) => void;
}

export const useSearchConfig = <T extends object>(
  searchForm: T,
  props: ISearchProps<T>,
  formRef: Ref<FormInstance | undefined>
) => {
  const search = reactive(searchForm);

  const handleSearch = () => {
    props.searchEvent(search);
  };

  const handleReset = () => {
    if (!formRef.value) return;
    console.log(formRef.value);
    formRef.value.resetFields();
    handleSearch();
  };

  return {
    search,
    handleSearch,
    handleReset
  };
};
